<template>
    <div>
        <el-dropdown @command="handleCommand" trigger="hover">
            <el-button type="primary" size="small">
                {{$t(tools)}} <i class="el-icon-caret-bottom el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item,index) in scripts" :key="index" :command="item">{{$t(item)}}</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>

        <div id="script-dialog" style="display:none">
            <el-form :model="scriptData" :rules="scriptValidRules" ref="scriptData">
                <el-form-item :label="$t('IP address')" :label-width="labelWidth" prop="ipaddress">
                    <el-input v-model="scriptData.ipaddress" auto-complete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item :label="$t('Operate')" :label-width="labelWidth">
                    <el-button type="primary" @click="execute(scriptData)" size="small">{{$t('execute')}}</el-button>
                </el-form-item>
                 <el-form-item :label="$t('result')" :label-width="labelWidth" prop="result">
                    <el-input type="textarea" v-model="scriptData.result" :rows="9"></el-input>
                 </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="danger" @click="closeDialog">{{$t('Cancel')}}</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import art from 'utils/artdialog'
import scriptApi from 'api/script'
export default {
    data() {
        return {
            labelWidth: '65px',
            tools: 'tools',
            // scripts: ['PING', 'TRACEROUTE', 'TELENT'],
            scripts: ['PING', 'TRACEROUTE'],
            scriptDialog: null,
            scriptData: {
                name: '',
                ipaddress: '',
                result: ''
            },
            scriptValidRules:{
                ipaddress:[{
                    required: true,
                    message: this.$t('The ip address cannot be empty'),
                    trigger: 'blur'
                }]
            }
        };
    },
    mounted() {
    },
    methods: {
        handleCommand(command) {
            this.scriptData.result = '';
            this.scriptData.name = command.toLowerCase();
            this.scriptDialog = art.artdialog(this.$t(command), $('#script-dialog'), 600, 400, 'scriptdialog');
        },
        execute(scriptData) {
            const self = this;
            if (scriptData.ipaddress == '') {
                this.$message({type: 'warning', message: this.$t('The ip address cannot be empty')});
                return;
            }
            scriptApi.executeScript(scriptData).then( response => {
                self.scriptData = response.data;
            }).catch( err => {
                this.$message({type: 'warning', message: this.$t('execute failed') + err});
            });
        },
        closeDialog() {
            if (this.scriptDialog != null) {
                this.scriptDialog.close();
            }
        }
    }
}
</script>